<script setup>
const props = defineProps({
  modelValue: {
    type: Object,
  },
})
const emit = defineEmits(['update:modelValue'])
const loading = ref(false)

async function handleClick(type) {
  if (loading.value)
    return

  loading.value = true

  try {
    const newMetric = JSON.parse(JSON.stringify(props.modelValue))

    switch (type) {
      case 'like':
        newMetric.isLike = !newMetric.isLike
        newMetric.articleMetric.likeCount += newMetric.isLike ? 1 : -1
        console.log('点赞操作成功')
        break

      case 'collect':
        newMetric.isCollect = !newMetric.isCollect
        newMetric.articleMetric.collectCount += newMetric.isCollect ? 1 : -1
        console.log('收藏操作成功')
        break

      case 'comment':
        console.log('跳转评论区域')
        return
    }

    emit('update:modelValue', newMetric)
  }
  catch (error) {
    console.error(`${type}操作失败:`, error)
  }
  finally {
    loading.value = false
  }
}
</script>

<template>
  <div class="mr-40 mt-30 flex-col">
    <el-badge type="primary" :value="modelValue.articleMetric.likeCount">
      <div
        class="size-50 f-c-c cursor-pointer rounded-full text-22 auto-bg"
        @click="handleClick('like')"
      >
        <i
          class="i-garden:thumbs-up-fill-12 bth color-#8A919F"
          :class="{ isT: modelValue.isLike }"
        />
      </div>
    </el-badge>
    <el-badge
      type="primary"
      class="mt-20"
      :value="modelValue.articleMetric.commentCount"
      @click="handleClick('comment')"
    >
      <div class="size-50 f-c-c cursor-pointer rounded-full text-22 auto-bg">
        <i class="bth i-fa-solid:comment-dots color-#8A919F" />
      </div>
    </el-badge>
    <el-badge
      type="primary"
      :value="modelValue.articleMetric.collectCount"
      class="mt-20"
      @click="handleClick('collect')"
    >
      <div class="size-50 f-c-c cursor-pointer rounded-full text-22 auto-bg">
        <i
          class="bth i-icomoon-free:star-full color-#8A919F"
          :class="{ isT: modelValue.isCollect }"
        />
      </div>
    </el-badge>
  </div>
</template>

<style scoped>
.bth:hover,
.isT {
  background-color: var(--el-color-primary);
}
</style>
